<template>
	<div class="main">
		<div class="home-header">
			<div class="user-info dis-flex">
				<div class="flex-1">
					<div class="user-name">{{userInfo.nickname}}</div>
					<div class="mt-10"><a class="btn btn-circle btn-daili">代理</a></div>
				</div>
				<router-link class="face" to="/person">
					<img src="@/assets/face.png" />
				</router-link>
			</div>
			<div class="user-price dis-flex t-c">
				<div class="flex-1 yue">
					<div class="price-number">{{userInfo.total_money}}</div>
					<div class="price-name">账户余额</div>
				</div>
				<div class="flex-1 shouyi">
					<div class="price-number">{{userInfo.history_bonus_money}}</div>
					<div class="price-name">累计收益</div>
				</div>
				<div class="flex-1 zjl">
					<div class="price-number">{{userInfo.win_rate}}%</div>
					<div class="price-name">中奖率</div>
				</div>
			</div>
		</div>
		<div class="price-options t-c mt-20">
			<router-link to="/withdraw"  class="price-out"><img src="" /><span class="ft-32">提现</span></router-link >
			<router-link to="/recharge" class="price-enter"><img src="" /><span class="ft-32">充值</span></router-link>
		</div>
		<div class="other-options ft-32 mt-20">
			<router-link to="/guesslist" class="options-item dis-block">
				<div class="options-item-icon"></div>
				<div>竞猜记录</div>
			</router-link>
			<router-link to="/chasinglist" class="options-item dis-block">
				<div class="options-item-icon"></div>
				<div>追号记录</div>
			</router-link>
			<router-link to="/accountlist" class="options-item dis-block">
				<div class="options-item-icon"></div>
				<div>账户明细</div>
			</router-link>
			<router-link to="/messagelist" class="options-item dis-block">
				<div class="options-item-icon"></div>
				<div>消息公告</div>
			</router-link>
			<div class="options-item">
				<div class="options-item-icon"></div>
				<div>团队管理</div>
			</div>
			<router-link to="/safe" class="options-item dis-block">
				<div class="options-item-icon"></div>
				<div>安全中心</div>
			</router-link>
			<div class="options-item">
				<div class="options-item-icon"></div>
				<div>联系客服</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {userInfo} from '@/api/home';
	export default {
		data(){
			return {
				userInfo:{}
			}
		},
		mounted(){
			this.getUserinfo();
		},
		methods:{
			getUserinfo(){
				userInfo().then(res=>{
					if (res.code==1) {
						this.userInfo=res.data;
					}
				});
			}
		}
	}
</script>
<style scoped lang="scss">
	@import "@/css/base.scss";
	.user-info{padding: 88px 40px 0;}
	.main{height: 100%;color: $co-default;background: $gray;}
	.user-name{font-size: 44px;}
	.btn-daili{width: 150px;height: 56px;padding:0;line-height:56px;box-sizing:border-box;text-align: center;}
	.face{width: 140px;height: 140px;overflow: hidden;border-radius: 50%;}
	.face img{width: 100%;height: 100%;}

	.home-header{padding-bottom: 26px;background: #FFF;}
	.user-price{margin-top: 54px;}
	.price-number{font-size: 32px;color: #833BFF;font-weight: bold;}
	.price-name{margin-top: 10px;font-size: 28px;color: #958DA5;}

	.price-options{padding: 28px 0;background: #FFF;}
	.price-out{display: inline-block;width: 296px;height: 84px;background-image: linear-gradient(-140deg, #FF9C75 0%, #FE4146 100%);box-shadow: 0 4px 12px 0 rgba(254,67,71,0.50);border-radius: 200px;text-align: center;line-height: 84px;color: #FFF;}
	.price-enter{display: inline-block;width: 296px;height: 84px;margin-left: 54px;background-image: linear-gradient(-140deg, #CBA8FD 0%, #693FEA 100%);box-shadow: 0 4px 12px 0 rgba(106,64,234,0.50);border-radius: 200px;text-align: center;line-height: 84px;color: #FFF;}

	.other-options{background: #FFF;}
	.options-item{padding: 50px 26px;border-bottom: 1px solid transparent; 
  border-image: svg(1px-border param(--color #F5F5F5)) 2 2 stretch;border-top:0;}
	.options-item>div{display: inline-block;}

</style>